<script setup lang="ts">
import { useDarkMode, useToggleDarkMode } from "@/hooks/useToggleDarkMode";

const onClickRight = (event: TouchEvent | MouseEvent) => {
  useToggleDarkMode(event);
};
</script>

<template>
  <van-nav-bar 
    fixed 
    placeholder 
    @click-right="onClickRight"
    class="custom-nav-bar"
  >
    <!-- <template #right>
      <svg-icon class="text-[18px]" :name="useDarkMode() ? 'light' : 'dark'" />
    </template> -->
  </van-nav-bar>
</template>

<style lang="less" scoped>
.custom-nav-bar {
  :deep(.van-nav-bar__content) {
    background: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 100%);
  }
  
  :deep(.van-nav-bar__title) {
    color: #fff;
  }
  
  :deep(.van-icon) {
    color: #fff !important;
  }
  
  :deep(.van-nav-bar__text) {
    color: #fff;
  }
  
  /* 玻璃拟态效果 */
  :deep(.van-nav-bar__content) {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }
}
</style>
